<template>
  <div class="s1">
    <div class="s11">
        <div class="s11-1">
            <div class="smn" @click="toshow()">
                <div class="">时间</div>
                <i class="el-icon-arrow-down" v-if="show"></i>
                <i class="el-icon-arrow-up" v-else></i>
            </div>
            <div class="smn1" v-if="show">
                <el-radio v-for="(item,index) in time" :key="index" v-model="radio" :label="item.id">{{item.name}}<span>({{item.name1}}条)</span></el-radio>
            </div>
        </div>
        <div class="s11-1">
            <div class="smn" @click="toshow1()">
                <div class="">门类</div>
                <i class="el-icon-arrow-down" v-if="show1"></i>
                <i class="el-icon-arrow-up" v-else></i>
            </div>
            <div class="smn1" v-if="show1">
                <el-radio v-for="(item,index) in time1" :key="index" v-model="radio1" :label="item.id">{{item.name}}</el-radio>
            </div>
        </div>
        <div class="s11-1" style="margin-bottom:0">
            <div class="smn" @click="toshow2()">
                <div class="">级别</div>
                <i class="el-icon-arrow-down" v-if="show2"></i>
                <i class="el-icon-arrow-up" v-else></i>
            </div>
            <div class="smn1" v-if="show2">
                <el-radio v-for="(item,index) in time2" :key="index" v-model="radio2" :label="item.id">{{item.name}}</el-radio>
            </div>
        </div>
    </div>
    <div class="s12">
        <div class="cont">
            <div class="cont-1">
                <div>检索范围：<span>全部</span></div>
                <div style="padding-left:24px">主题：<span>全部</span></div>
            </div>
            <div class="cont-2">
                <div>共找到<span>4562</span>条结果</div>
                <div class="shuliang">1/321</div>
            </div>
        </div>
        <div class="cont1">
            <div class="cont1-1">
                <div class="cont1-11">
                    <el-checkbox
                    v-model="checkAll"
                    label="全选"
                    @change="handleCheckAllChangeSales"
                    ></el-checkbox>
                </div>
                <div class="cont1-12">
                    已选<span>{{bushForm.length}}</span>项
                </div>
               

            </div>
            <div class="cont1-2">
                <div>每页显示</div>
                <div>
                    <el-select v-model="value" placeholder="">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                
                <div>条</div>
            </div>
            <div class="cont1-3">
                <div style="display: flex;
                    justify-content: flex-end;
                    align-items: center;">排序： <span>相关度</span><img src="../../assets/images/pxs.png" alt=""></div>
                <div style="padding-left:12px">发表时间 : 综合</div>
            </div>

        </div>
        <el-checkbox-group
            v-model="bushForm"
            @change="handleCheckedColumnChangeSales"
        >
            <div class="cont2"  v-for="(item,index) in tableData" :key="item.id" >
                <div class="left">
                    <el-checkbox
                    :key="item.id"
                    :label="item.id"
                ></el-checkbox>

                </div>
                <div class="righ" @click="towenxian(item.id)">
                    <div class="mcs">
                        <div class="mc">胡庆余堂中药文化</div>
                        <div class="mc1">
                            <img src="../../assets/images/s1.png" alt="">
                            <div>收藏</div>
                        </div>
                    </div>
                    <div class="fx">
                        <span>国家级</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>传统医药</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>上城区</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>2006-05-20</span>
                    </div>
                    <div class="nr">
                        “江南药王”胡庆余堂，系“红顶商人”胡雪岩于公元一八七四年(清同治十三年)创建，地处杭州历史文化街区清河坊。从南宋建都到明、清二代，清河坊一带形成了一条“药铺”长廊：有南宋的保和堂、明朝的朱养心膏药店，及晚清“六大家”胡庆余堂、叶种德堂、方回春堂等。胡庆余堂继承了南宋官方指定的《太平惠民和剂局方》，从这一意义上讲，杭州是“古代中医药典”的发迹之地，而胡庆余堂则乘承了这一良好的传统。胡庆余堂中药文化以及所形成的独特的文化空间，主要体现：一、“戒欺”文化。“戒欺”是胡庆余堂的店训，由胡雪岩亲笔写就。一百三十年来，胡庆余堂始终恪守“戒欺”原则，形成了独一无二的以“戒欺”为内涵的人文精神。这种理念跟中国传统哲学思想和伦理道德密切相关，又立足于中药文化基础之上，具有超越企业层面、倡导社会公德的特征。二、建筑艺术。胡庆余堂的古建筑系国家级文物...查看全部
                    </div>
                </div>
            </div>
        </el-checkbox-group>
        <div class="cont3">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="100"
                :page-size="value*1">
            </el-pagination>
        </div>
    </div>
  </div>
</template>
<style scoped  lang="scss">
// 分页
::v-deep .el-pagination.is-background .el-pager li{
    background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #911F23;
    color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #911F23;
    
}
//分页数
::v-deep .el-select-dropdown__item.selected{
    color: #911F23 !important;
}
::v-deep .el-input__inner{
    color: #911F23;
}


::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #333;
}
::v-deep .el-divider--vertical {
    height: 15px;
}
::v-deep .el-radio {
  .el-radio__input {
    .el-radio__inner {
      border-radius: 2px;
    }
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width: 8px;
    height: 3px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 2px;
    left: 1px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }
}
::v-deep .el-radio{
    line-height: 30px;
    display: block;
    .el-radio__label{
        font-size: 12px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        span{
            color: #999999;
            padding-left: 10px;
        }
    }
}
::v-deep .el-input--suffix .el-input__inner{
    width: 70px;
    height: 22px;
    margin: 0 6px;
}
/*右侧图标样式  \e790下箭头图标*/
::v-deep  .el-select .el-input .el-select__caret.el-input__icon::before {
  content: " \e790";  
  color: #333333;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-select .el-input .el-select__caret {
  transform: rotateZ(0deg);
}

    .s1{
        width: 1400px;
        margin: 24px auto 90px;
        display: flex;
        justify-content: space-between;
        .s11{
            width: 240px;
            .s11-1{
                width: 100%;
                // height: 376px;
                margin-bottom: 24px;
                .smn{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: calc(100% - 32px);
                    height: 46px;
                    background-color: #F2F2F2;
                    border-radius: 8px 8px 0px 0px;
                    padding: 0 16px;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                    cursor: pointer;
                }
                .smn1{
                    width: calc(100% - 32px);
                    // height: 306px;
                    padding: 18px 16px 12px;
                    background-color: #fff;
                    border-radius:  0px 0px 8px 8px;
                    // line-height: 45px;
                }
            }
            
        }
        .s12{
            width: 1140px;
            .cont{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .cont-1{
                    display: flex;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                    span{
                        color: #911F23;
                    }
                }
                .cont-2{
                    display: flex;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #666666;
                    span{
                        color: #911F23;
                        padding: 0 4px;
                    }
                    .shuliang{
                        padding-left: 24px;
                    }
                }
            }
            .cont1{
                width: calc(100% - 32px);
                height: 48px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 16px;
                background: #FFFFFF;
                border-radius: 8px 8px 8px 8px;
                margin-top: 16px;
                .cont1-1{
                    width: 40%;
                    display: flex;
                    .cont1-12{
                        font-size: 14px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #333333;
                        padding-left: 12px;
                        span{
                            padding: 0 6px;
                            color: #911F23;
                        }
                    }
                    .cont1-13{
                        margin-left: 12px;
                        width: 44px;
                        height: 22px;
                        background: #911F23;
                        border-radius: 4px 4px 4px 4px;
                        opacity: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 14px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                    .cont1-14{
                        margin-left: 12px;
                        width: 72px;
                        height: 20px;
                        border-radius: 4px 4px 4px 4px;
                        opacity: 1;
                        border: 1px solid #911F23;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 14px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #911F23;
                    }
                }
                .cont1-2{
                    width: 20%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                }
                .cont1-3{
                    width: 40%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                     font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                    img{
                        // padding-top: 8px;
                        height: 20px;
                        width: 20px;
                    }
                    span{
                        color: #911F23;
                    }
                   
                }
            }
            .cont2{
                width: calc(100% - 32px);
                padding: 16px;
                background: #FFFFFF;
                border-radius: 8px 8px 8px 8px;
                opacity: 1;
                margin-top: 12px;
                display: flex;
                cursor: pointer;
                .left{
                    width: 5%;
                }
                .righ{
                    width: 95%;
                    .mcs{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        // align-items: center;
                        .mc{
                            height: 24px;
                            font-size: 16px;
                            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                            font-weight: 400;
                            color: #3D3D3D;
                        }
                        .mc1{
                            display: flex;
                            align-items: center;
                            font-size: 12px;
                            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                            font-weight: 400;
                            color: #333333;
                            img{
                                width: 16px;
                                height: 16px;
                            }
                        }
                    }
                    .fx{
                        margin-top: 16px;
                        font-size: 12px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #666666;
                    }
                    .nr{
                        width: 100%;
                        margin-top: 16px;
                        font-size: 12px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #666666;
                        line-height: 20px;
                    }
                }
            }
            .cont3{
                width: 1400px;
                margin-top: 16px;
                text-align: center;
                transform: translateX(-10%);
            }
        }
    }
  
</style>

<script>
//  import { getUserList,addUser  } from "@/api/api.js"; 
export default {
  data(){
    return{
        
         options: [{
            value: '10',
            label: '10'
            }, {
            value: '20',
            label: '20'
            }, {
            value: '30',
            label: '30'
            }, {
            value: '50',
            label: '50'
            }, {
            value: '100',
            label: '100'
        }],
        value: '10',
        radio:'0',
        radio1:'0',
        radio2:'0',
        time:[
            {id:1,name:'2023',name1:"400"},
            {id:2,name:'2023',name1:"400"},
            {id:3,name:'2023',name1:"400"},
            {id:4,name:'2023',name1:"400"},
            {id:5,name:'2023',name1:"400"},
            {id:6,name:'2023',name1:"400"},
            {id:7,name:'2023',name1:"400"},
            {id:8,name:'2023',name1:"400"},
            {id:9,name:'2023',name1:"400"},
            {id:10,name:'2023',name1:"400"},
        ],
        time1:[
            {id:1,name:'门类'},
            {id:2,name:'门类'},
            {id:3,name:'门类'},
            
        ],
        time2:[
            {id:1,name:'国家级'},
            {id:2,name:'省级'},
            {id:3,name:'市级'},
            {id:4,name:'县级'},
        ],
        show:true,
        show1:true,
        show2:true,

        checkAll:false,
        isALL: false, // 全选框是否在勾选状态
        tableData: [
            {
            id: "1",
            code: "Y000028",
            name: "医疗",
            },
            {
            id: "2",
            code: "Y000029",
            name: "场馆",
            },
            {
            id: "3",
            code: "Y000030",
            name: "机场站房",
            },
        ], //全部数据
        bushForm: [], //选中的数据
       
    }
  },
  created(){
     
     
  },
  mounted(){
    // this.drawChart()
  },
  methods:{
    towenxian(id){
        this.$router.push({path:'/literature',query:{id:id}})
    },
    handleCheckAllChangeSales(val) {
      this.bushForm = []
      var checkedsItem = val ? this.tableData : [];
      if (checkedsItem.length > 0) {
        checkedsItem.forEach((item) => {
          this.bushForm.push(item.id);
        });
      } else {
        this.bushForm = [];
      }
      this.isALL = false;
    },
 
    handleCheckedColumnChangeSales(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isALL =
        checkedCount > 0 && checkedCount < this.tableData.length;
    },
      toshow(){
        this.show = !this.show
      },
      toshow1(){
        this.show1 = !this.show1
      },
      toshow2(){
        this.show2 = !this.show2
      }
   
  },
  computed:{
　　
},
  components: {
      
  }
}
</script>
